<template>
    <section class="wrapper" :class="cname">
        <swiper :options="options" :not-next-tick="options.notNextTick">
            <swiper-slide v-for="(item,index) in items" :key="index">
                <pic-txt :item="item"></pic-txt>
            </swiper-slide>
            <div class="swiper-pagination" v-if="options.pagination"  slot="pagination"></div>
        </swiper>
    </section>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper"
import picTxt from "@/pages/common/picTxtCom.vue"
import "swiper/dist/css/swiper.css"
export default {
  name: "sliderComponent",
  props: {
      cname: {
          type: String,
          default: ""
      },
      options: {
          type: Object,
          default () {
              return {
                  observeParents:true,//修改swiper的父元素时，自动初始化swiper
                  observer:true,   
                  slidesPerView: 2.4,
                  spaceBetween: 20,
                  freeMode: true,                                 
              }
          }
      },
      items: {
          type: Array,
          default ( ) {
              return []
          }
      }
  },
  data ( ) {
      return{

      }
  },
  components: {
      swiper,
      swiperSlide,
      picTxt
  }  
}
</script>

<style lang="stylus" scoped>

.wrapper >>> .swiper-pagination-bullet-active  
  background #fff
.wrapper >>> .swiper-container-horizontal > .swiper-pagination-bullets 
  bottom -6px

  .swiper-img
    width:100%
    display:block
    overflow:hidden
    background-repeat no-repeat
    background-position center 
    background-size cover 
@import "~@/assets/css/swiperCustom.styl"
</style>